import React from 'react'
import { Card, Button, Toast, Form, Divider, Space } from 'antd-mobile'
import './index.css'

const FeedbackCard: React.FC = () => {
    return (
        <>
            <Card
                title={
                    <div style={{ fontWeight: 'normal' }}>
                        14 有谷气培根虾仁炒饭 ￥15.8
                    </div>
                }
                style={{ borderRadius: 0, background: '#eee' }}
            >
                <div className="main">
                    <Form.Item label='退款原因'>
                        口味不佳/个人感受不好
                    </Form.Item>
                    <Form.Item label='用户备注'>
                        太辣了！
                    </Form.Item>
                    <Form.Item label='用户上传图片'>
                        12.00前送达
                    </Form.Item>
                </div>
                <div className="foot" onClick={e => e.stopPropagation()}>
                    <Space>
                        <Button
                            color='default'
                            onClick={() => Toast.show('点击了底部按钮')}
                            size='mini' shape='rounded'
                        >
                            联系用户
                        </Button>
                        <Button
                            color='primary'
                            onClick={() => Toast.show('点击了底部按钮')}
                            size='mini' shape='rounded'
                        >
                            确认退款
                        </Button>
                    </Space>
                </div>
            </Card>
            <Divider />
        </>
    )
}

export default FeedbackCard